<script setup lang="ts">

const imageUrl = ref('')
const existUrl = 'others/4dd47a2f-8402-45e8-883e-7c4e98a84a55.JPG'
const formulas = [
  {id: 1, step: 1, name: '公式1', answer: `TR U TR'`},
  {id: 2, step: 1, name: '公式2', answer: `TR2 U TR'2`},
  {id: 3, step: 2, name: '公式3', answer: `TU' R U R' TU`},
  {id: 4, step: 2, name: '公式4', answer: `TU' R U R' F R' F' R TU`},
  {id: 5, step: 3, name: '公式5', answer: `TR U2 X TR U2 TR U2' TR' U2 TL U2 TR' U2' TR U2 TR' U2' TR'`},
  {id: 6, step: 3, name: '公式6', answer: `MR2 U2 MR2 TU2 MR2 MU2`},
]
const outMap = new Map<string, string>()
buildMap()

function buildMap() {
  let map = new Map<string, string>()
  // 基本↑↓←→
  map.set('R', '右↑');
  map.set('L', '左↓')
  map.set('U', '上←')
  map.set('D', '下→')
  map.set('F', '前→')
  map.set('B', '后←')

  map.set(`R'`, '右↓')
  map.set(`L'`, '左↑')
  map.set(`U'`, '上→')
  map.set(`D'`, '下←')
  map.set(`F'`, '前←')
  map.set(`B'`, '后→')

  // T 和 M
  for (const entry of map.entries()) {
    const [key, value] = entry
    outMap.set(key, value)
    outMap.set(`M${key}`, `M${value}`)
    outMap.set(`T${key}`, `T${value}`)
  }
  const secondMap = new Map(outMap)
  // 2次
  for (const entry of secondMap.entries()) {
    const [key, value] = entry
    outMap.set(`${key}2`, `${value}2`)
  }

  outMap.set('X', 'X↑')
  outMap.set('Y', 'X←')
  outMap.set('Z', 'X↓')
}

console.log('outMap', outMap)

// 翻译后的结果
const computedFormulas = computed(() => {
  return formulas.map(item => {
    let answerArr = item.answer.split(' ')
    answerArr = answerArr.map(a => {
      const singleAnswer = outMap.get(a)
      if (singleAnswer) {
        return singleAnswer
      } else {
        return a
      }
    })
    item.answer = answerArr.join('  ')
    return item;
  })
})

</script>

<template>
  <!--  <x-upload v-model="imageUrl" path="others" size="10em"></x-upload>-->
  <x-card>
    <x-image-view :url="existUrl"/>
    <div class="before">
      <el-divider/>
      <el-row>
        <el-text size="large" type="primary" tag="b">原版公式</el-text>
      </el-row>
      <el-row>
        <el-col v-for="item in formulas" :key="item.id">
          <el-text>{{ item.name }}(步骤{{ item.step }}): {{ item.answer }}</el-text>
        </el-col>
      </el-row>
    </div>
    <div class="after">
      <el-divider/>
      <el-row>
        <el-text size="large" type="success" tag="b">翻译后</el-text>
        <el-col v-for="item in computedFormulas" :key="item.id">
          <el-text>{{ item.name }}(步骤{{ item.step }}): {{ item.answer }}</el-text>
        </el-col>
      </el-row>
    </div>
  </x-card>
</template>

<style scoped lang="scss">
</style>